<template>
    <Header></Header>

    <!-- 主内容区域 -->
    <main class="container max-w-screen-xl mx-auto p-4 px-6">
        <!-- grid 表格布局，分为 4 列 -->
        <div class="grid grid-cols-4 gap-7">
            <!-- 左边栏，占用 3 列 -->
            <div class="col-span-4 md:col-span-3 mb-3">
                <!-- 分类列表 -->
                <CategoryListCard></CategoryListCard>
            </div>

            <!-- 右边侧边栏，占用一列 -->
            <aside class="col-span-4 md:col-span-1">
                <div class="sticky top-[5.5rem]">
                    <!-- 博主信息 -->
                    <UserInfoCard></UserInfoCard>
                    <!-- 标签 -->
                    <TagListCard></TagListCard>
                </div>
            </aside>
        </div>

    </main>
    <ScrollToTopButton></ScrollToTopButton>
    <Footer></Footer>
</template>

<script setup>
import Header from '@/layouts/weblog/components/Header.vue'
import Footer from '@/layouts/weblog/components/Footer.vue'
import UserInfoCard from '@/layouts/weblog/components/UserInfo.vue'
import TagListCard from '@/layouts/weblog/components/TagListCard.vue'
import CategoryListCard from '@/layouts/weblog/components/CategoryListCard.vue'
import ScrollToTopButton from '@/layouts/weblog/components/ScrollToTopButton.vue'
</script>
